<template>
	<view class="page index">
		<empty v-if="empty" desc="该回款已删除"></empty>
		<block v-else>
			<view class="agreement-sheet">
				<view class="header">
					<view class="left">
						回款编号：{{detail.no}}
					</view>
					<view class="right" :style="{color: `${detail.color}`, borderColor: `${detail.color}`}">
						{{detail.statusText}}
					</view>
				</view>
				<view class="details">
					<view class="det-item">
						<view class="tag">
							回款金额
						</view>
						<view class="value">
							{{detail.price}}
						</view>
					</view>
					<view class="det-item">
						<view class="tag">
							回款方式
						</view>
						<view class="value">
							{{detail.type}}
						</view>
					</view>
					<view class="det-item">
						<view class="tag">
							回款日期
						</view>
						<view class="value">
							{{$share.getDate(detail.returnTime)}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<navigator :url="`/pages/index/customer/details?id=${detail.customerId}`" class="list-item" hover-class="none">
						<view class="left">
							<span class="iconfont icon" style="color: #de868f;">&#xe6ec;</span>
							<view class="title">
								{{detail.customerName}}
							</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#101010"></uni-icons>
						</view>
					</navigator>
					<navigator :url="`/pages/index/agreement/details?id=${detail.contractId}`" class="list-item" hover-class="none">
						<view class="left">
							<span class="iconfont icon" style="color: #b886f8;">&#xe6ed;</span>
							<view class="title">
								{{detail.contract.name}}
							</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#101010"></uni-icons>
						</view>
					</navigator>
				</view>
			</view>
			<view class="tab-list">
				<view :class="['tab-item', tabIndex == index && 'tab-select']" v-for="(item, index) in tabList" :key="index" @click="tabIndex = index">
					{{item}}
				</view>
			</view>
			<view class="container">
				<payment-message v-if="tabIndex == 0" :message="detail"></payment-message>
				<payment-relevant v-if="tabIndex == 1" :paymentId="detail.id" :fileUrls="detail.fileUrls"></payment-relevant>
			</view>
			<view class="footer">
				<button @click="moreOperation">更多</button>
			</view>
		</block>
		<!-- 更多操作 -->
		<uni-popup ref="agreementOperation" type="center">
			<view class="more-operation">
				<view class="operation-item" v-if="detail.status == 2" @click="edit">
					<span class="iconfont icon" style="color: #101010;">&#xe8ac;</span>
					<span>编辑回款</span>
				</view>
				<view class="operation-item" @click="cancelPayment" v-if="detail.status == 1">
					<span class="iconfont icon" style="color: #101010;">&#xe753;</span>
					<span>作废回款</span>
				</view>
				<view class="operation-item" v-if="detail.status == 0 || detail.status == 2" @click="deletePayment">
					<span class="iconfont icon" style="color: #101010;">&#xe603;</span>
					<span>删除回款</span>
				</view>
				<view class="operation-item" @click="approval">
					<span class="iconfont icon" style="color: #101010;">&#xe6b8;</span>
					<span>查看审批</span>
				</view>
			</view>
		</uni-popup>
		<!-- 删除回款 -->
		<uni-popup ref="deletePopup" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						删除回款
					</view>
					<view class="content">
						确定要删除该回款吗？
					</view>
				</view>
				<view class="bottom">
					<button class="cancle" @click="$refs.deletePopup.close();">取消</button>
					<button class="confire" @click="confireDelete">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue";
	import paymentMessage from "./components/paymentMessage.vue";
	import paymentRelevant from "./components/paymentRelevant.vue";
	import {getPaymentDetailApi, deletePaymentApi} from "@/api/paymentCollection_api.js";
	export default{
		components: {
			empty,
			paymentMessage,
			paymentRelevant
		},
		data(){
			return{
				empty: false,
				id: 0,
				tabList:['基本信息', '相关信息'],
				tabIndex:0,
				detail: {},
			}
		},
		onLoad(e) {
			this.id = e.id;
		},
		onShow() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			})
			this.getPaymentDetail();
		},
		methods:{
			// 获取回款详情
			async getPaymentDetail(){
				let res = await getPaymentDetailApi(this.id).catch(() => {
					uni.hideLoading();
					return Promise.reject();
				})
				let statusText = "";
				let color = "";
				let type = '';
				switch(res.data.status){
					case 0: {
						statusText = "待审核";
						color = "#f6d7ab";
						break;
					}
					case 1: {
						statusText = "生效";
						color = "#3388FF";
						break;
					}
					case 2: {
						statusText = "审核不通过";
						color = "#bd3124";
						break;
					}
					case 3: {
						statusText = "作废";
						color = "#F44444";
						break;
					}
					default: {
						statusText = "";
						color = ""
						break;
					}
				}
				switch(res.data.returnType){
					case 1: {
						type = "支票";
						break;
					}
					case 2: {
						type = "现金";
						break;
					}
					case 3: {
						type = "邮政汇款";
						break;
					}
					case 4: {
						type = "电汇";
						break;
					}
					case 5: {
						type = "网上转账";
						break;
					}
					case 6: {
						type = "支付宝";
						break;
					}
					case 7: {
						type = "微信支付";
						break;
					}
					case 8: {
						type = "其他";
						break;
					}
					default: {
						type = "暂无";
						break;
					}
				}
				this.detail = res.data;
				this.$set(this.detail, 'statusText', statusText);
				this.$set(this.detail, 'color', color);
				this.$set(this.detail, 'type', type);
				await uni.hideLoading();
			},
			createProgress(){
				uni.navigateTo({
					url:'/pages/index/task/createProgress'
				})
			},
			moreOperation(){
				this.$refs.agreementOperation.open();
			},
			// 编辑回款
			edit(){
				this.$refs.agreementOperation.close();
				uni.navigateTo({
					url: `/pages/index/paymentCollection/edit?detail=${JSON.stringify(this.detail)}`
				})
			},
			// 作废
			cancelPayment(){
				this.$refs.agreementOperation.close();
				uni.navigateTo({
					url:`/pages/index/paymentCollection/cancelPayment?id=${this.detail.id}`
				})
			},
			// 删除回款
			deletePayment(){
				this.$refs.agreementOperation.close();
				this.$refs.deletePopup.open();
			},
			confireDelete(){
				this.$refs.deletePopup.close();
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				deletePaymentApi(this.detail.id).then(() => {
					uni.hideLoading();
					this.empty = true;
					uni.showToast({
						icon: 'success',
						title: '删除成功'
					})
				}).catch(() => {
					uni.hideLoading();
				})
			},
			// 查看审批
			approval(){
				uni.navigateTo({
					url: `/pages/index/approval/details?id=${this.detail.processInstanceId}&showPass=${false}`
				})
				this.$refs.agreementOperation.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		@include flex-c;
		.agreement-sheet{
			margin: 24rpx 28rpx 0;
			flex: 0 0 auto;
			@include box;
			@include list;
			.bottom{
				padding: 0 0 24rpx;
				.list-item{
					@include flex-r-between-center;
					border-top: #d8d8d8 4rpx solid;
					height: 84rpx;
					.left{
						@include flex-r-start-center;
						.icon{
							font-size: 44rpx
						}
						.title{
							font-size: 32rpx;
							color: #40a4ec;
							padding-left: 20rpx;
							
						}
					}
				}
			}
		}
		.tab-list{
			flex: 0 0 auto;
			@include flex-r-evely-center;
			padding: 34rpx 28rpx 0;
			.tab-item{
				color: #101010;
				font-size: 28rpx;
				text-align: center;
				&::after{
					content: '';
					display: block;
					width: 120rpx;
					height: 6rpx;
					border-radius: 10rpx;
					background-color: transparent;
					margin-top: 10rpx;
				}
				&.tab-select{
					color: #1684fc;
					&::after{
						background-color: #1684fc;
					}
				}
			}
		}
		.container{
			flex: 1 0 0;
			overflow: auto;
			&::-webkit-scrollbar{
				display: none;
			}
		}
		.footer{
			flex: 0 0 auto;
			padding: 24rpx 30rpx 0;
			margin: 0 0 24rpx;
			@include flex-r-center-start;
			button{
				@include button;
				color: #fff;
				width: 80%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				background-color: #198AFA;
			}
		}
		// 更多操作弹出框样式
		.more-operation{
			width: 400rpx;
			background-color: #fff;
			@include box;
			.operation-item{
				@include flex-r-center-center;
				font-size: 28rpx;
				line-height: 100rpx;
				border-bottom: #d0d0d0 4rpx solid;
				&:last-child{
					border-bottom: none;
				}
				.icon{
					padding-right: 20rpx;
				}
			}
		}
		//对话框样式
		.model-popup{
			width: 600rpx;
			background-color: #fff;
			@include box;
			border-radius: 16rpx;
			.top{
				padding: 24rpx 40rpx 56rpx;
				.title{
					color: #101010;
					font-size: 36rpx;
					text-align: center;
					padding: 0 0 34rpx;
				}
				.content{
					color: #747474;
					font-size: 28rpx;
					text-align: center;
				}
			}
			.bottom{
				@include flex-r;
				border-top: 4rpx #F0F0F2 solid;
				button{
					@include button;
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					background-color: #fff;
					border-radius: 0;
				}
				.cancle{
					color: #BBBBBB;
					border-right: 4rpx #F0F0F2 solid;
				}
				.confire{
					color: #4095E5;
				}
			}
		}
	}
</style>